<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="css/googleapis.css" rel="stylesheet">
    <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" rel="stylesheet"/>
    <link href="css/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>点餐系统</title>
    <script src="js/vue.js"></script>
    <script src="js/vuetify.js"></script>
    <script src="js/jquery-2.1.0.min.js"></script>
</head>

<body>
    <div id="app">

        <v-navigation-drawer v-model="drawer" app>
            <!-- 左侧未登录提示 -->
            <v-list dense v-show="!login.isLogin">
                <v-list-item link v-on:click="showReg">
                    <v-list-item-action>
                        <v-icon>mdi-account-plus</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>注册</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="showLogin">
                    <v-list-item-action>
                        <v-icon>mdi-login</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>登陆</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>

            <!-- 欢迎信息和系统菜单 -->
            <v-list dense v-show="login.isLogin">
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-account</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{login.username}} 您好!</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="dishCk">
                    <v-list-item-action>
                        <v-icon>mdi-cart-outline</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>我要点菜</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="orderCk">
                    <v-list-item-action>
                        <v-icon>mdi-cart-outline</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>我的订单</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item  v-on:click="logout">
                    <v-list-item-action>
                        <v-icon>mdi-logout</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>退出登陆</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app>
            <!-- 点餐页面,菜品列表模块 -->
            <v-app-bar app color="indigo" dark>
                <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                <v-toolbar-title>点餐系统</v-toolbar-title>
            </v-app-bar>
            <v-content>
                <v-simple-table v-show="status == 'dishesPage' && login.isLogin">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-left">菜名</th>
                                <th class="text-left">价格</th>
                                <th class="text-left">选择</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="dish in dishes">
                                <td>
                                    <v-icon>mdi-food</v-icon>
                                    {{dish.name}}
                                </td>
                                <td>
                                    <v-icon>mdi-cash</v-icon>
                                    {{dish.price}}
                                </td>
                                <td>
                                    <v-switch v-model="dish.select"></v-switch>
                                </td>
                            </tr>
                        </tbody>
                    </template>
                </v-simple-table>
                <v-row v-show="status == 'dishesPage' && login.isLogin">
                    <v-col :col="11">
                        <div class="pa-2">已点 
                            {{selectedDishCount}} 道菜, 总计 
                            {{selectedDishPrice}} 元</div>
                    </v-col>
                    <v-col :cols="2">
                        <v-btn color="primary" block v-on:click="addOrder">下单</v-btn>
                    </v-col>
                </v-row>

                <!-- 个人订单列表 -->
                <v-simple-table v-show="status == 'ordersPage' && login.isLogin">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-left">序号</th>
                                <th class="text-left">用户</th>
                                <th class="text-left">金额</th>
                                <th class="text-left">状态</th>
                                <th class="text-left">时间</th>
                                <th class="text-left">详情</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="order in orders">
                                <td>{{order.oid}}</td>
                                <td>{{order.username}}</td>
                                <td>{{order.money}}</td>
                                <td>{{order.state==0?"未完成":"已完成"}}</td>
                                <td>{{order.createtime}}</td>
                                <td>
                                    <v-btn color='primary' v-on:click="showDetail(order.oid)">查看详情</v-btn>
                                </td>
                            </tr>
                        </tbody>
                    </template>
                </v-simple-table>

                <v-row v-show="!login.isLogin">
                    <v-col>
                        <v-card class="pa-2 text-center">请先登陆!</v-card>
                    </v-col>
                </v-row>

                <!-- 登录窗口 -->
                <v-row justify="center">
                    <v-dialog v-model="login.showLoginDialog" persistent max-width="400px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">登陆</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="用户名*" v-model="login.username" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="密码*" 
                                            type="password"
                                            v-model="login.password" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="doLogin">登陆</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="login.showLoginDialog = false">取消
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>

                <!-- 注册窗口 -->
                <v-row justify="center">
                    <v-dialog v-model="reg.showRegister" persistent max-width="400px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">注册</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="用户名*" v-model="reg.name" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="密码*" type="password" v-model="reg.password" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="确认密码*" type="password" v-model="reg.password2" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="doRegister">注册</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="reg.showRegister = false">取消
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>

                <!-- 某个订单的详情 -->
                <v-row justify="center">
                    <v-dialog v-model="showCurOrder" persistent max-width="600px">
                        <v-simple-table>
                            <template v-slot:default>
                                <thead>
                                    <tr>
                                        <th class="text-left">菜品</th>
                                        <th class="text-left">价格</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="dish in curOrder">
                                        <td>{{dish.name}}</td>
                                        <td>{{dish.price}}</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <v-btn color="primary" v-on:click="showCurOrder = false">关闭</v-btn>
                                        </td>
                                    </tr>
                                </tbody>
                            </template>
                        </v-simple-table>
                    </v-dialog>
                </v-row>
            </v-content>
        </v-app>
    </div>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                drawer: null,
                status: 'dishesPage', // 取值为: ordersPage, dishesPage
                // 用于辅助实现登陆
                login: {
                    isLogin: false,
                    showLoginDialog: false,
                    username: "",
                    password: "",
                },
                // 注册相关参数定义
                reg: {
                    showRegister: false,
                    name: "",
                    password: "",
                    password2: ""
                },
                user: {
                    name: ""
                },
                dishes: [], // 所有菜品
                orders: [], // 所有订单
                // 辅助实现订单显示详情
                showCurOrder: false,
                curOrder: []
            },
            methods: {
                showDetail(oid){ // 查看订单详情
                   this.showCurOrder = true;
                   jQuery.ajax({
                    url:"orderdetail",
                    type:"GET",
                    data:{oid:oid},
                    success:function(result){
                        if(result!=null && result.data!=null){
                            app.curOrder = result.data;
                        }else{
                            alert("查询失败，请重试！");
                        }
                    }
                   });
                },
                dishCk(){ // 点击“我要下单”按钮
                    this.status = 'dishesPage'; // 显示菜品列表
                    // todo:作业实现 ajax 请求获取并赋值菜品
                },
                orderCk(){ // 点击“我的订单”按钮
                    this.status = 'ordersPage';
                    // 请求后端获取到我的订单
                    jQuery.ajax({
                        url:"orderlist",
                        type:"GET",
                        data:{flag:1}, // flag=1 标识查询自己的订单，如果没有此参数那么查询全部的订单
                        success:function(result){
                            if(result!=null && result.data!=null && result.data.length>0){
                                // 查询到订单信息，把结果赋值给 vue 变量
                                app.orders = result.data;
                            }
                        }
                    });
                },
                addOrder(){ // 下单
                   var dids = "";
                   var money = 0;
                   app.dishes.forEach(dish => {
                    if(dish.select){
                        dids += dish.did +",";
                        money += dish.price;
                    }
                   }); 
                   if(money<=0){
                    alert("请您先选择要下单的菜！");
                    return;
                   }
                   jQuery.ajax({
                    url:"addorder",
                    type:"POST",
                    data:{dids:dids,money:money},
                    success:function(result){
                        if(result!=null && result.state==200){
                            alert("恭喜：下单成功！");
                            location.href=location.href;
                        }else{
                            alert("抱歉：操作失败，请您重试！");
                        }
                    }
                   });
                },
                showLogin(){ // 显示登录窗口
                    this.login.username = "";
                    this.login.password = "";
                    this.login.showLoginDialog=true;
                },
                doLogin(){ // 登录方法
                    // 1.非空效验
                    if(this.login.username==""){
                        alert("请先输入用户名！");
                        return;
                    }
                    if(this.login.password==""){
                        alert("请先输入密码！");
                        return;
                    }
                    // 2.请求后端进行登录操作
                    jQuery.ajax({
                        url:"login",
                        type:"POST",
                        data:{username:this.login.username,password:this.login.password},
                        success:function(result){
                            if(result!=null && result.data!=""){
                                alert("恭喜：登录成功！");
                                // 隐藏登录的模态窗体
                                app.login.showLoginDialog = false;
                                app.initLogin(result.data);
                            }else{
                                alert("抱歉：登录失败，请重试！");
                            }
                        }
                    });
                },
                showReg(){ // 点击“注册”按钮显示注册窗体
                    this.reg.showRegister = true;
                    this.reg.name = "";
                    this.reg.password = "";
                    this.reg.password2= "";
                },
                init(){ // 判断是否登录
                  jQuery.ajax({
                    url:"sess",
                    type:"GET",
                    success:function(result){
                        if(result!=null && result.state==200){
                            // 已经登录
                            app.initLogin(result.data);
                        }
                    }
                  });  
                },
                initLogin(username){ // 显示登录的信息
                    // 1.左侧显示欢迎信息
                    app.login.isLogin = true;
                    app.login.username = username;
                    // 2.右侧显示菜品的信息（ajax 菜品列表）
                    app.status = 'dishesPage';
                    jQuery.ajax({
                        url:"dishlist",
                        type:"GET",
                        data:{isdown:0},
                        success:function(result){
                            if(result!=null && result.data!=null && result.data.length>0){
                                // 有数据，赋值给 vue 变量
                                app.dishes = result.data;
                            }
                        }
                    });
                },
                doRegister(){ // 进行注册
                    // 1.参数的正确性效验
                    if(this.reg.name==""){
                        alert("请先输入用户名！");
                        return;
                    }
                    if(this.reg.password==""){
                        alert("请先输入密码！");
                        return;
                    }
                    if(this.reg.password2==""){
                        alert("请先输入确认密码！");
                        return;
                    }
                    // 判断两次输入的密码是否一致
                    if(this.reg.password!=this.reg.password2){
                        alert("抱歉：两次输入的密码不一致，请先核对！");
                        return;
                    }
                    // 2.将参数提交给后端
                    jQuery.ajax({
                        url:"reg",
                        type:"POST",
                        data:{
                            username:this.reg.name,
                            password:this.reg.password
                        },success:function(result){
                            if(result!=null && result.state==200 && result.data==1){
                                alert("恭喜：注册成功！");
                                // 隐藏注册窗体
                                app.reg.showRegister=false;
                            }else if(result!=null && result.data!=1){
                                alert(result.msg);
                            }
                            else{
                                alert("抱歉：服务器繁忙，请稍后再试！");
                            }
                        }
                    });
                },
                logout(){
                    if(confirm("是否退出？")){
                        jQuery.ajax({
                            url:"logout",
                            type:"POST",
                            success:function(result){
                                if(result!=null && result.state==200){
                                    alert("退出登录成功！");
                                    app.login.isLogin = false;
                                }else{
                                    alert("退出登录失败，请重试！"); 
                                }
                            }
                        });
                    }
                }
            },
            computed:{ // 计算属性和监听器
                // 点餐的个数
                selectedDishCount() {
                    let count = 0;
                    this.dishes.forEach(dish => {
                        if (dish.select) {
                            count++;
                        }
                    });
                    return count;
                },
                // 计算下单的菜品总价
                selectedDishPrice() {
                    let price = 0;
                    this.dishes.forEach(dish => {
                        if (dish.select) {
                            price += dish.price;
                        }
                    })
                    return price;
                }
            },
            vuetify: new Vuetify(),
        });
        app.init(); // 判断是否登录
    </script>
</body>

</html>